<template>
  <div>
    <h2>上传学生数据Excel文件</h2>
    <input type="file" @change="handleFileChange"/>
    <button @click="uploadFile">上传</button>
    <div v-if="message">{{ message }}</div>
    <P>文件上传需要十分钟到二十分钟，请耐心等待</P>
    <P>上传完成后，自动跳转到首页</P>
  </div>
</template>
//..
<script setup>
import {ref} from 'vue'
import axios from 'axios'
import router from "@/router/index.js";

const file = ref(null)
const message = ref('')

const handleFileChange = (event) => {
  file.value = event.target.files[0]
}

const uploadFile = async () => {
  if (!file.value) {
    message.value = '请先选择一个文件'
    return
  }

  const formData = new FormData()
  formData.append('file', file.value)

  try {
    const response = await axios.post('/api/excel/student', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    message.value = '文件上传成功'
    router.push("/file")
  } catch (error) {
    message.value = '文件上传失败: ' + error.message
  }
}
</script>

<style scoped>
/* 添加一些简单的样式 */
h2 {
  margin-bottom: 20px;
}

input {
  margin-right: 10px;
}

button {
  margin-right: 10px;
}

div {
  margin-top: 20px;
  color: red;
}
</style>
